@color: #333;

.sim-tree {
    list-style: none;
    font-size: 14px;
    color: @color;
    padding: 5px;

    ul,
    li {
        margin: 0;
        padding: 0;
    }

    li {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0;

        ul {
            display: none;
            margin-left: 15px;
        }
    }

    ul.show, li.show {
        display: block;
    }

    ul.none, li.none {
        display: none;
    }

    li.disabled {
        > a {
            color: #aaa;
            cursor: not-allowed;

            .sim-tree-checkbox {
                border-color: #eee;
            }
        }
    }

    a {
        font-size: 14px;
        color: @color;
        text-decoration: none;
        vertical-align: top;
        line-height: 26px;
    }

    .sim-tree-spread {
        width: 20px;
        padding-left: 5px;
        box-sizing: border-box;

        &.sim-hidden {
            visibility: hidden;
        }
    }

    .sim-tree-spread,
    a {
        display: inline-block;
        height: 26px;
        cursor: pointer;
    }

    .sim-loading {
        background: url('') center center no-repeat;

        &.sim-icon-d:before,
        &.sim-icon-r:before {
            display: none;
        }
    }

    .sim-icon-d:before,
    .sim-icon-r:before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        vertical-align: top;
        position: relative;
    }

    .sim-icon-r:before {
        border-left-width: 8px;
        border-left-color: @color;
        top: ((26px - 6 * 2px) / 2);
    }

    .sim-icon-d:before {
        margin-left: -4px;
        border-top-color: @color;
        top: ((26px - 6 * 2px) / 2 + 6px / 2);
    }

    .sim-tree-checkbox {
        display: inline-block;
        border: 1px solid #ccc;
        height: 16px;
        width: 16px;
        border-radius: 3px;
        box-sizing: border-box;
        text-align: center;
        line-height: 16px;
        background: #fff;
        color: #fff;
        vertical-align: middle;
        margin-right: 6px;
        margin-top: -2px;

        &.sim-hide {
            display: none;
        }

        &.sim-tree-semi, &.checked {
            border-color: #2b85e4;
            background-color: #2b85e4;
        }

        &.sim-tree-semi {
            position: relative;

            &:after {
                content: '';
                display: block;
                position: absolute;
                width: 8px;
                height: 2px;
                background: #fff;
                top: 6px;
                left: 3px;
            }
        }

        &.checked {
            background-image: url('');
            background-repeat: no-repeat;
            background-position: center center;
        }
    }
}
